<template>
  <div style="padding: 10px">
    <!--功能区域-->
    <div style="margin: 10px 0px">

      <el-button type="primary" @click="add">新增</el-button>
<!--
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
-->

    </div>
    <!--搜索区域-->

    <div style="margin: 10px 0">

      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    </div>
<!--<el-button>按钮</el-button>-->
    <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        style="width: 70%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="ID" width="120"  sortable=""/>
      <el-table-column property="username" label="用户名" width="120" />
      <el-table-column  label="角色(管理员：3，老师：1 学生：2)" width="140" prop="age"
                        :sortable="true" >
      </el-table-column>
      <el-table-column property="phone" label="联系方式" width="120"/> >
        <el-table-column property="sex" label="所教课程" width="120"
                         v-if="user.age===1"/> >
      <el-table-column property="password" label="密码" width="120"
                       show-password />
        <el-table-column property="address" label="详情" width="160"
                         v-if="user.age===1" />

          <el-table-column  label="详情" width="160" >

        <template #default="scope">
<!--          scope.$index,-->
          <el-button  size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title ="确定要删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" size="small" >删除</el-button>
            </template>
          </el-popconfirm>

        </template>

      </el-table-column>

    </el-table>
    <div style="margin: 10px 0">


      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>

      <el-dialog
          v-model="dialogVisible"
          title="Tips"
          width="30%"
      >


        <el-form :model="form" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-form>


        <el-form :model="form" label-width="120px">
          <el-form-item label="联系方式">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-form>


         <el-form :model="form" label-width="120px" v-if="user.age===1">
          <el-form-item label="课程名称">
            <el-input type="textarea" v-model="form.sex"></el-input>
          </el-form-item>
        </el-form>

        <el-form :model="form" label-width="120px" v-if="user.age===1">
          <el-form-item label="成绩">
            <el-input type="textarea" v-model="form.address"></el-input>
          </el-form-item>
        </el-form>


        <el-form :model="form" label-width="120px">
          <el-form-item label="密码">
            <el-input type="textarea" v-model="form.password" show-password></el-input>
          </el-form-item>
        </el-form>


       <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save"
              >确定</el-button
              >
            </span>
        </template>

      </el-dialog>
    </div>
    <div style="margin-top: 420px">
      <el-button @click="toggleSelection([tableData[1], tableData[2],tableData[3],tableData[0]])"
      >选择专业必修课</el-button
      >
      <el-button @click="toggleSelection()" >清空选课</el-button>
      <el-button @click="toggleSelection1()">确认选课</el-button>
    </div>
    </div>


</template>

<script>
// @ is an alias to /src


import request from "../utils/request";
import { defineComponent, reactive, toRefs } from 'vue'


export default {
  setup() {
    const state = reactive({
      shortcuts: [
        {
          text: 'Last week',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: 'Last month',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
        {
          text: 'Last 3 months',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
      ],
      value1: [new Date(2021, 11, 10, 10, 10), new Date(2021, 12, 11, 10, 10)],
      value2: '',
    })

    return toRefs(state)
  },




  data() {
    return {
      /*startTime: '',
      endTime: '',*/
      form:{},
      user:{},
      dialogVisible:false,

      search: '',
      currentPage:1,
      pageSize:10,
      total:0,
      tableData: [

      ],
      multipleSelection: [],
    }
  },
  created(){
    let userStr=sessionStorage.getItem("user")||"{}"
    this.user=JSON.parse(userStr)
    this.load()
  },
  methods: {
    load() {//user/selectAllUsers
      ///user
      //http://localhost:9090/user/selectAllUsers
      request.get("/user",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }


      }).then(res => {
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
        //this.load()//add01
      })
    },
    add(){

      this.dialogVisible=true
      this.form={}//清空原有属性

    },
    save(){
      if (this.form.id){
        request.put("/user",this.form ).then(res=> {
          console.log(res)
          this.$message({
            type:"success",
            message:"更新成功！ :)"
          })
          this.load()
          this.dialogVisible=false
        })
      }
      else {
        request.post("/user",this.form ).then(res=> {
          console.log(res)
          this.$message({
            type:"success",
            message:"新增成功！ :)"
          })
          this.load()
          this.dialogVisible=false
        })
      }

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    toggleSelection1(){



    },
    handleEdit(row){

      this.form=JSON.parse(JSON.stringify(row))
      this.dialogVisible=true;
    },
    handleDelete(id){
      console.log(id)
      request.delete("/user/"+id).then(res=>
      {
        /*if (res.code==0){
          this.$message()
        }*/
        this.load()
      })
    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },

  },

}

</script>


